<template>
    <div v-transfer-dom>
        <popup v-model="propShow"
               width="100%"
               @on-hide="propHide">
            <div class="content-wrap">
                <noData v-if="theModel == 0"></noData>
                <item :theModel="theModel"
                      :selectLeaderFn="selectLeaderFn"></item>
            </div>
        </popup>
    </div>
</template>
<script>
import item from './item'
import { TransferDom, Popup } from 'vux'
export default {
    name: 'departUserAllProp',
    data () {
        return {
            propShow: false,
            theModel: [],
            userInfo: ''
        }
    },
    components: {
        Popup,
        item
    },
    directives: {
        TransferDom
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.getData()
    },
    props: {
        selectLeaderFn: {
            type: Function
        },
        leaderPropShow: {
            type: Boolean,
            default: false
        },
        initTheModel: {
            type: Object
        }
    },
    watch: {
        leaderPropShow (newVal) {
            this.propShow = newVal
        }
    },
    methods: {
        getData () {
            let param = {
                'allowPaging': false,
                'business': 'GetDepartUserAll',
                'data': '',
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': this.userInfo.userid,
                'userId': this.userInfo.tokenId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then((res) => {
                this.theModel = res.data.data
                this.initTheModel && this.theModel.unshift(this.initTheModel)
                console.log(this.theModel)
                this.$forceUpdate()
            })
        },
        openChild (item) {
            this.$set(item, 'open', !item.open)
        },
        propHide () {
            this.$parent.leaderPropShow = false
        }
    }
}
</script>
<style scoped>
.content-wrap {
    height: calc(100% - 40px);
    overflow-y: scroll;
}
.content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}
.name {
    line-height: 24px;
    max-width: 320px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: #333;
}
.user-list li {
    line-height: 18px;
    color: #666;
    font-size: 14px;
    padding-left: 30px;
    padding-bottom: 10px;
}
.user-list ul li:last-child {
    padding-bottom: 0;
}
</style>
